
<template>
  <!-- 歌单详情页 -->
  <transition name="slide" appear>
    <music-list
      :title="songsheettype"
      :bg-image="bgImage"
      :songs="songs"
      :PlayCount="PlayCount"
      :creator="this.creator"
      :description="this.description"
      :songsheetName="this.songsheetName"
      :songsheetInfo="this.songsheetInfo"
    ></music-list>
  </transition>
</template>

<script>
import MusicList from "@/components/music-list/songsheet-list";
import { createSong } from "@/common/song";
import { getSongSheet } from "@/request/api";
import { mapGetters } from "vuex";
import { savaLikeMusic, loadLikeMusic } from "@/utils/cache";
export default {
  data() {
    return {
      songs: [],
      // 歌单创造者
      creator: {},
      // 歌单描述：
      description: "",
      songsheetName: "",
      songsheetInfo: {}
    };
  },
  computed: {
    title() {
      return this.songsheet.name;
    },
    bgImage() {
      return this.songsheet.picUrl || this.songsheet.coverImgUrl;
    },
    PlayCount() {
      return this.songsheet.playCount;
    },
    ...mapGetters(["songsheet", "songsheettype"])
  },
  created() {
    this._getSongSheetList();
  },
  activated() {
    this._getSongSheetList();
  },
  methods: {
    async _getSongSheetList() {
      if (!this.songsheet.id) {
        this.$router.push("/recommend");
        return;
      }
      const res = await getSongSheet(this.songsheet.id);

      if (res.code !== 200) {
        this.$toast("获取歌单列表失败!");
        return;
      }
      //赋值全部
      this.songsheetInfo = res.playlist;

      // 赋值给歌单创造者：
      this.creator = res.playlist.creator;
      this.songsheetName = res.playlist.name;
      // 歌单描述：
      this.description = res.playlist.description;

      let songSheetList = res.playlist.tracks;

      if (this.songsheettype === "私人歌单") {
        let list = loadLikeMusic();
        if (list > 0) {
          console.log('读取缓存中喜欢的音乐');
          
          this.songs = list;
        } else {
          this.songs = this._normalizeSongs(songSheetList);
          savaLikeMusic(this.songs);
        }
      } else {
        this.songs = this._normalizeSongs(songSheetList);
      }
      // 格式化歌曲
    },
    _normalizeSongs(list) {
      let ret = [];
      list.forEach(item => {
        if (item.id && item.al.id) {
          ret.push(createSong(item));
        }
      });
      return ret;
    }
  },
  components: {
    MusicList
  }
};
</script>

<style lang="less" scoped>
.slide-enter-active {
  transition: all 0.3s;
}
// .slide-enter-active,
// .slide-leave-active {
//   transition: all 0.3s;
// }
.slide-enter,
.slide-leave-to {
  transform: translate3d(100%, 0, 0);
}
</style>